<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Temu跨境电商平台系统设计 - 核心使用场景概述</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .slide-container {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
        position: relative;
        overflow: hidden;
        font-family: "Noto Sans SC", sans-serif;
      }
      .bg-temu-orange {
        background-color: #ff4e00;
      }
      .text-temu-orange {
        color: #ff4e00;
      }
      .bg-temu-blue {
        background-color: #003366;
      }
      .text-temu-blue {
        color: #003366;
      }
      .border-temu-orange {
        border-color: #ff4e00;
      }

      .logo-container {
        position: absolute;
        top: 30px;
        right: 30px;
        animation: fadeIn 1.2s ease-out;
      }

      .page-number {
        animation: fadeIn 1.5s ease-out forwards;
      }

      .title-container {
        animation: fadeInDown 1s ease-out;
        max-width: 900px;
      }

      .animated-bar {
        width: 80px;
        height: 4px;
        animation: growWidth 1.4s ease-out;
      }

      .decoration-circle {
        position: absolute;
        border-radius: 50%;
        z-index: 0;
      }

      .circle-1 {
        width: 250px;
        height: 250px;
        background-color: rgba(255, 78, 0, 0.05);
        bottom: -100px;
        left: -100px;
      }

      .circle-2 {
        width: 180px;
        height: 180px;
        background-color: rgba(0, 51, 102, 0.05);
        top: 100px;
        right: -50px;
      }

      .content-container {
        max-width: 1000px;
        width: 90%;
        z-index: 10;
      }

      .intro-text {
        opacity: 0;
        animation: fadeIn 1s ease-out forwards;
        animation-delay: 0.3s;
      }

      .feature-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 30px;
      }

      .feature-card {
        background-color: white;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: center;
        opacity: 0;
        transform: translateY(20px);
        animation: cardSlideUp 0.6s ease-out forwards;
      }

      .feature-card:nth-child(1) {
        animation-delay: 0.4s;
      }
      .feature-card:nth-child(2) {
        animation-delay: 0.5s;
      }
      .feature-card:nth-child(3) {
        animation-delay: 0.6s;
      }
      .feature-card:nth-child(4) {
        animation-delay: 0.7s;
      }
      .feature-card:nth-child(5) {
        animation-delay: 0.8s;
      }
      .feature-card:nth-child(6) {
        animation-delay: 0.9s;
      }

      .feature-icon {
        margin-right: 20px;
        min-width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: rgba(255, 78, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ff4e00;
        font-size: 1.5rem;
        transition: all 0.3s ease;
      }

      .feature-card:hover .feature-icon {
        background-color: #ff4e00;
        color: white;
        transform: rotateY(360deg);
        transition: transform 0.8s, background-color 0.3s, color 0.3s;
      }

      .feature-text {
        text-align: left;
      }

      .user-section {
        margin-top: 40px;
        opacity: 0;
        animation: fadeIn 1s ease-out forwards;
        animation-delay: 1s;
      }

      .user-container {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
      }

      .user-card {
        text-align: center;
        flex: 1;
        max-width: 200px;
        padding: 15px;
        transition: all 0.3s ease;
      }

      .user-card:hover {
        transform: translateY(-10px);
      }

      .user-icon {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin: 0 auto 15px;
        background-color: #003366;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        box-shadow: 0 6px 15px rgba(0, 51, 102, 0.2);
      }

      .globe-animation {
        position: absolute;
        top: 20%;
        left: 15%;
        font-size: 10rem;
        color: rgba(0, 51, 102, 0.03);
        animation: spin 50s linear infinite;
        z-index: 0;
      }

      /* 添加页面切换动画 */
      @keyframes slideInRight {
        from {
          transform: translateX(100%);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }

      @keyframes slideInLeft {
        from {
          transform: translateX(-100%);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }

      .slide-container {
        animation: slideInRight 0.8s ease-out forwards;
      }

      .slide-out {
        animation: slideOutLeft 0.8s ease-out forwards;
      }

      @keyframes slideOutLeft {
        from {
          transform: translateX(0);
          opacity: 1;
        }
        to {
          transform: translateX(-100%);
          opacity: 0;
        }
      }

      @keyframes slideOutRight {
        from {
          transform: translateX(0);
          opacity: 1;
        }
        to {
          transform: translateX(100%);
          opacity: 0;
        }
      }

      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes fadeInDown {
        from {
          transform: translateY(-20px);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }

      @keyframes growWidth {
        from {
          width: 0;
        }
        to {
          width: 80px;
        }
      }

      @keyframes cardSlideUp {
        from {
          transform: translateY(20px);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <div class="slide-container flex flex-col items-center">
      <!-- Background Elements -->
      <div class="decoration-circle circle-1"></div>
      <div class="decoration-circle circle-2"></div>
      <div class="globe-animation">
        <i class="fas fa-globe-americas"></i>
      </div>

      <!-- Logo in top right corner -->
      <div class="logo-container">
        <img
          src="images/temu_logo.svg"
          alt="Temu Logo"
          width="100"
          height="30"
        />
      </div>

      <!-- Title -->
      <div class="title-container text-center mt-16 mb-8">
        <h1 class="text-4xl font-bold text-temu-blue mb-2">核心使用场景概述</h1>
        <div class="animated-bar bg-temu-orange mx-auto"></div>
      </div>

      <!-- Main Content -->
      <div class="content-container">
        <!-- Introduction -->
        <div
          class="intro-text bg-white bg-opacity-80 p-5 rounded-lg shadow-sm mb-8 text-temu-blue"
        >
          <p class="mb-3 text-lg">
            Temu是一个全球性电子商务平台，由中国公司PDD控股有限公司（拼多多母公司）于2022年推出，主要面向国际市场，支持<span
              class="text-temu-orange font-medium"
              >多语言、多货币</span
            >的全球化购物体验。
          </p>
          <p class="text-lg">
            主要功能包括商品浏览、购物车管理、订单处理、评价系统、物流跟踪等，为全球用户提供一站式跨境购物解决方案。
          </p>
        </div>

        <!-- Features Grid - 对称布局，2列 -->
        <div class="feature-grid">
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-search"></i>
            </div>
            <div class="feature-text">
              <h3 class="text-temu-blue font-medium text-lg mb-1">商品浏览</h3>
              <p class="text-gray-600">
                智能分类与搜索系统，支持多语言商品展示
              </p>
            </div>
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-shopping-cart"></i>
            </div>
            <div class="feature-text">
              <h3 class="text-temu-blue font-medium text-lg mb-1">
                购物车管理
              </h3>
              <p class="text-gray-600">多设备同步，智能推荐与价格追踪</p>
            </div>
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-clipboard-check"></i>
            </div>
            <div class="feature-text">
              <h3 class="text-temu-blue font-medium text-lg mb-1">订单处理</h3>
              <p class="text-gray-600">全球支付解决方案，多币种自动转换</p>
            </div>
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-star"></i>
            </div>
            <div class="feature-text">
              <h3 class="text-temu-blue font-medium text-lg mb-1">评价系统</h3>
              <p class="text-gray-600">跨语言评价展示，图片与视频支持</p>
            </div>
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-shipping-fast"></i>
            </div>
            <div class="feature-text">
              <h3 class="text-temu-blue font-medium text-lg mb-1">物流跟踪</h3>
              <p class="text-gray-600">全球物流实时跟踪，多物流商整合</p>
            </div>
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-headset"></i>
            </div>
            <div class="feature-text">
              <h3 class="text-temu-blue font-medium text-lg mb-1">客户服务</h3>
              <p class="text-gray-600">多语言客服支持，智能问答系统</p>
            </div>
          </div>
        </div>

        <!-- User Types -->
        <div class="user-section">
          <h2 class="text-temu-blue font-bold text-xl mb-4">面向用户群体</h2>

          <div class="user-container">
            <div class="user-card">
              <div class="user-icon">
                <i class="fas fa-user"></i>
              </div>
              <h3 class="text-temu-blue font-medium text-lg mb-1">消费者</h3>
              <p class="text-gray-600 text-sm">全球各地的终端购物用户</p>
            </div>

            <div class="user-card">
              <div class="user-icon">
                <i class="fas fa-store"></i>
              </div>
              <h3 class="text-temu-blue font-medium text-lg mb-1">商家</h3>
              <p class="text-gray-600 text-sm">跨境销售产品的供应商</p>
            </div>

            <div class="user-card">
              <div class="user-icon">
                <i class="fas fa-cogs"></i>
              </div>
              <h3 class="text-temu-blue font-medium text-lg mb-1">
                系统管理员
              </h3>
              <p class="text-gray-600 text-sm">维护与管理平台运行</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Page Number -->
      <div
        class="page-number absolute bottom-6 right-8 text-temu-blue opacity-70"
      >
        3 / 20
      </div>
    </div>
  </body>
</html>
